<template>
	<view class='page'>
	<view class="cont-block">
			<view class="weui-navbar">
			  <block v-for="(item,index) in itemList" >
				<view class="header-tab weui-navbar__item" :class="currentTab == index ? 'weui-bar__item_on' : ''" :data-id="index" @tap="tabClick">
				  <view  class="weui-navbar__title">{{item.name}}</view>
				</view>
			  </block>
			  <view class="weui-navbar__slider" :style="'left: 0px;transform: translateX('+sliderOffset+'px);-webkit-transform:translateX('+sliderOffset+'px);'"></view>
			</view>
			<!-- <block v-for="(item,index) in itemList">
				<view class="cont-list" :class="currentTab == index ? 'listActive' : ''" :data-id="index" @tap="tab">
					<text>{{item.name}}</text>
					<image v-if="currentTab == index" src='/images/triangle.png'></image>
					<image v-else src='/static/images/triangle-000.png'></image>
				</view>
			</block> -->
</view>
	<view class='merchant-list' v-if="currentTab == 0"> 
			<view class='merchant' v-for="(item,index) in lists" :data-id="item.id"  @tap='goCard'>
				<view class='merchant-portrait'>
					<image :src="item.newAvatarUrl||item.avatarUrl"></image>
				</view>
				<view class='merchant-info'>
					<view class='merchant-info-name'>
						<text class='name' v-if="item.name || item.nickName">{{item.name ? item.name : item.nickName}}</text>
						<view class='name' wx:else>此用户未填写入驻资料</view>
					</view>
					<view class='merchant-info-tel'>
						<view >{{item.mobile}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class='merchant-list' v-if="currentTab == 1">
			<view class='merchant' v-for="(item,index) in merchantList" :data-merId="item.merchant_id" :data-userId="item.save_id" @tap='goMerchant'>
				<view class='merchant-portrait'>
					<image :src="item.save_user.newAvatarUrl||item.save_user.avatarUrl"></image>
				</view>
				<view class='merchant-info'>
					<view class='merchant-info-name'>
						<text class='name'>{{item.name}}</text>
					</view>
					<view class='merchant-info-tel'>
						<!-- <image src='/static/images/tel-red.png'></image> -->
						<text>{{item.mobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class='card-list' v-if="currentTab == 2">
			<!-- 名片列表 -->
			<view class='merchant' v-for="(item,index) in cardList" :data-id="item.id"  @tap='goCard'>
				<view class='merchant-portrait'>
					<image :src="item.avatarUrl"></image>
				</view>
				<view class='merchant-info'>
					<view class='merchant-info-name'>
						<text class='name'>{{item.name}}</text>
					</view>
					<view class='merchant-info-tel'>
						<!-- <image src='/static/images/tel-red.png'></image> -->
						<text>{{item.mobile}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	/*引入基类文件*/
	import app from '@/App.vue';
	/*引入接口文件*/
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	export default {
		onLoad: function(options) {
			var arr = this.main_getGlobal();
			this.getMySubordinate(1, false, arr.token, arr.type);
			// console.log('arr的值', arr);
			// this.collectMerchantList(arr.token, arr.type);
		},
		methods: {
			
			// 顶部tab切换
			
			getMySubordinate: function(cat, loadMore, token, type) {
				uni.showLoading({
					title: '加载中...',
				})
				/*实际传参loadMore是没有的*/
				gyzjModel.prototype.getMySubordinate(cat,token, type).then(res => {
					console.log('进来获取res', res);
					switch (res.code) {
						case 1:
							uni.hideLoading();
							// let page = res.data.page;
							// let pageCount = res.data.pageCount;
							let lists = res.data.data;
							/*进行追加数据*/
							// if (loadMore) {
							// 	lists = this.lists.concat(res.data.data);
							// }
							console.log('lists的值', lists);
							this.lists = lists;
							// this.status = res.data.countArr;
							// this.page = res.data.page_count;
							// this.pageCount = res.data.total_count;
			
							break;
						default:
							console.log('进来默认执行');
							uni.hideLoading();
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							break;
					}
				})
			},
			//收藏店铺
			collectMerchantList: function(token, type) {
				gyzjModel.prototype.collectMerchantList(token, type).then(data => {
					switch (data.code) {
						case 1:

							this.merchantList = data.data.data;
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				});
			},
			/*店铺被收藏的接口*/
			collectCardList: function(token, type) {
				gyzjModel.prototype.collectCardList(token, type).then(data => {
					switch (data.code) {
						case 1:
							this.cardList = data.data.data;
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				});
			},
			/*查看用户名片*/
			goCard: function(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../my-info/cardcase/cardcase?id=' + id,
				})
			},
			/*查看店铺名片*/
			goMerchant: function (e) {
				/*店铺这里需要全部小写*/
			    let merId = e.currentTarget.dataset.merid;
				let userId = e.currentTarget.dataset.userid;
			    uni.navigateTo({
			      url: '../../merchant/merchant?merId='+merId+'&userId='+userId+'&type=',
			    })
			  },
			  tabClick: function (e) {
			   this.sliderOffset= e.currentTarget.offsetLeft;
			     var arr = this.main_getGlobal();
			     let id = e.currentTarget.dataset.id;
			     if(id == "0"){
			     	this.getMySubordinate(1, false, arr.token, arr.type);
			     } else if(id == "1"){
			     	this.collectMerchantList(arr.token, arr.type);
			     } else { 
			     	this.collectCardList(arr.token, arr.type)
			     }
			     // id == '0' ? this.collectMerchantList(arr.token, arr.type) : this.collectCardList(arr.token, arr.type);
			     this.currentTab = id;
			}
		},
		data() {
			return {
				itemList: [{
						name: '好友名片',
						index: 0
					},{
						name: '商家名片',
						index: 1
					},
					{
						name: '收藏名片',
						index: 2
					},
				],
				currentTab: 0,
				merchantList: '',
				cardList: '',
				sliderOffset:0,
				lists:[],
			}
		}
	}
</script>

<style>
	@import url("../../../static/style/app.css");

	.cont-block {
		display: flex;
		height: 120upx;
		border-bottom: 1px solid #e5e5e5;
	}
	.weui-bar__item_on .weui-navbar__title{
		color:#f94c48;
		}
.weui-navbar__slider{
	  width: 33.3vw;
	  height:3px;
	}
	.cont-list {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #e5e5e5;
		font-size: 36upx;
	}

	.cont-list:nth-child(2) {
		border-right: none;
	}

	.cont-list image {
		width: 20upx;
		height: 15upx;
		margin-left: 10upx
	}

	.listActive {
		background-color: #f94c48;
		border-bottom: 1px solid #f94c48;
		color: #fff;
	}

	/* 商家列表 */
	.merchant {
		display: flex;
		/* align-items: center; */
		background-color: #fff;
		margin-top: 20upx;
		padding: 20upx;
	}

	.merchant-portrait {
		width: 100upx;
		height: 100upx;
		margin-right: 20upx;
	}

	.merchant-portrait image {
		width: 100%;
		height: 100%;
		border-radius: 4px;
		/* border-radius: 50%; */
	}

	.merchant-info {
		width: 70%;
		display: flex;
		flex-direction: column;
	}

	.merchant-info-name {
		display: flex;
		align-items: center;
	}

	.name {
		font-size:32upx;
		/* font-weight: 600; */
	}

	.merchant-info-tel {
		display: flex;
		align-items: center;
		font-size: 28upx;
		color:#999;
		margin-top:10upx;
	}

	.merchant-info-tel image {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}
</style>
